<template>
	<div class="business">
		<x-header title="营业统计" :left-options="{backText: '关闭'}">
		</x-header>
		<div class="content">
			<div class="today_stat" @click="goTodayData">
				<div class="today_stat_left">
					<img src="../../assets/images/statistics/blue.jpg" alt="" />
					<span>今日实时数据</span>
				</div>
				<div class="today_stat_right">
					<span>详情</span>
					<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
				</div>
			</div>
			<div class="statistics_num">
				<div class="business_volume news">
					<p>营业额<span>新</span><img src="../../assets/images/statistics/help.jpg" alt="" /></p>
					<p>￥<span>0.00</span></p>
				</div>
				<div class="business_volume">
					<p>有效订单<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
					<p><span>0</span>单</p>
				</div>
			</div>
			<div class="time_nav">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">昨日</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">近7天</tab-item>
					<tab-item :selected="selectIndex===2" @on-item-click="onItemClick">近30天</tab-item>
					<tab-item :selected="selectIndex===3" @on-item-click="onItemClick">自定义</tab-item>
				</tab>
				<div class="select_dates" v-if="selectIndex===3">
					<div class="select_dates_left">
						<group>
							<datetime placeholder="开始日期" v-model="value1" @on-change="change1" @on-cancel="log1('cancel')" @on-confirm="onConfirm1" @on-hide="log1('hide', $event)"></datetime>
						</group>
					</div>
					<p style="padding-top: .2rem;">至</p>
					<div class="select_dates_right">
						<group>
							<datetime placeholder="结束日期" v-model="value2" @on-change="change2" @on-cancel="log2('cancel')" @on-confirm="onConfirm2" @on-hide="log2('hide', $event)"></datetime>
						</group>
					</div>
				</div>
			</div>
			<div class="business_analysis">
				<div class="today_stat" @click="goRingRatio">
					<div class="today_stat_left">
						<img src="../../assets/images/statistics/blue.jpg" alt="" />
						<span>营业环比分析</span>
					</div>
					<div class="today_stat_right">
						<span>详情</span>
						<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
					</div>
				</div>
				<div class="business_analysis_detail">
					<div class="business_analysis_detail_top">
						<p>营业额<span>新</span><img src="../../assets/images/statistics/help.jpg" alt="" /></p>
						<p>￥<span>0.00</span></p>
						<p v-if="selectIndex===0">比前1日--</p>
						<p v-if="selectIndex===1">比前7日--</p>
						<p v-if="selectIndex===2">比前30日--</p>
						<p v-if="selectIndex===3">比前{{ differ_days }}日--</p>
					</div>
					<div class="business_analysis_detail_bottom">
						<div class="business_analysis_detail_top news">
							<p>有效订单<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
							<p>0单</p>
							<p v-if="selectIndex===0">比前1日--</p>
							<p v-if="selectIndex===1">比前7日--</p>
							<p v-if="selectIndex===2">比前30日--</p>
							<p v-if="selectIndex===3">比前{{ differ_days }}日--</p>
						</div>
						<div class="business_analysis_detail_top">
							<p>单均价<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
							<p>￥--</p>
							<p v-if="selectIndex===0">比前1日--</p>
							<p v-if="selectIndex===1">比前7日--</p>
							<p v-if="selectIndex===2">比前30日--</p>
							<p v-if="selectIndex===3">比前{{ differ_days }}日--</p>
						</div>
					</div>
				</div>
				<div class="probably_status">
					<div class="probably_status_top" @click="goTimeMeal">
						<p>发现下列可能情况</p>
						<div class="probably_status_all">
							<span>全部</span>
							<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
						</div>
					</div>
					<div class="status_lists">
						<div class="morning">
							<p><img src="../../assets/images/statistics/time.jpg" alt="" />早餐</p>
							<p><img src="../../assets/images/statistics/down_arrow.jpg" alt="" />￥0.00</p>
						</div>
						<div class="morning">
							<p><img src="../../assets/images/statistics/time.jpg" alt="" />午餐</p>
							<p><img src="../../assets/images/statistics/down_arrow.jpg" alt="" />￥0.00</p>
						</div>
						<div class="morning">
							<p><img src="../../assets/images/statistics/time.jpg" alt="" />下午茶</p>
							<p><img src="../../assets/images/statistics/down_arrow.jpg" alt="" />￥0.00</p>
						</div>
						<div class="morning">
							<p><img src="../../assets/images/statistics/time.jpg" alt="" />晚餐</p>
							<p><img src="../../assets/images/statistics/down_arrow.jpg" alt="" />￥0.00</p>
						</div>
						<div class="morning">
							<p><img src="../../assets/images/statistics/time.jpg" alt="" />夜宵</p>
							<p><img src="../../assets/images/statistics/down_arrow.jpg" alt="" />￥0.00</p>
						</div>						
					</div>
				</div>
				<div class="same_trade_compare" v-if="selectIndex!==3">
					<div class="today_stat" @click="goPeerCompare">
						<div class="today_stat_left">
							<img src="../../assets/images/statistics/blue.jpg" alt="" />
							<span>与商圈同行对比</span>
						</div>
						<div class="today_stat_right">
							<span>详情</span>
							<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
						</div>
					</div>
					<p>入店客户量，新客户，下单转化率，重复下单客户表现均优于同行均值，继续保持~</p>
				</div>
				<div class="invalid_order">
					<div class="today_stat" @click="goInvalidOrder">
						<div class="today_stat_left">
							<img src="../../assets/images/statistics/blue.jpg" alt="" />
							<span>无效订单分析</span>
						</div>
						<div class="today_stat_right">
							<span>详情</span>
							<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
						</div>
					</div>
					<div class="invalid_order_bottom">
						<div class="invalid_order_num">
							<p>有效订单<img src="../../assets/images/statistics/help.jpg" alt="" /></p>
							<p>0单</p>
							<p>比前7日--</p>
						</div>
						<div class="invalid_order_reason">商家原因：0单</div>
					</div>
				</div>
			</div>
		</div>
		<alert v-model="show1" title="提示" @on-show="onShow">{{ alert_title }}</alert>
	</div>
</template>

<script>
	import { XHeader, Tab, TabItem, Datetime, Group, Alert } from 'vux';
	export default {
		name: 'business',
		data() {
			return {
				selectIndex: 0, //0-昨日  1-近7天  2-近30天  3-自定义
				value1: '', //自定义开始时间
				value2: '', //自定义结束时间
				differ_days: 0, //相差的天数
				show1: false,
				alert_title: '',
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Datetime,
			Group,
			Alert
		},
		computed: {

		},
		created() {
			this.selectIndex = +this.$route.params.id;
		},
		methods: {
			//时间切换
			onItemClick(index) {
				this.selectIndex = index;
			},
			change1() {

			},
			log1() {

			},
			onConfirm1() {

			},
			change2() {

			},
			log2() {

			},
			onConfirm2(val) {
				if(!this.value1) {
					this.show1 = true;
					this.alert_title = '请先选择开始日期';
					this.value1 = this.value2 = '';
					return;
				}
				this.value2 = val;
				//计算相差天数
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				let days = s2.getTime() - s1.getTime();
				if(days <= 0) {
					this.show1 = true;
					this.alert_title = '结束日期不能小于开始日期';
					this.value2 = '';
					return;
				}
				if(days !== days || days <= 0) {
					this.differ_days = 0;
				} else {
					this.differ_days = parseInt(days / (1000 * 60 * 60 * 24));
				}
				//console.log(this.differ_days);
			},
			onShow() {

			},
			//今日实时数据详情
			goTodayData() {
				this.$router.push('/todayData');
			},
			//环比分析详情
			goRingRatio() {
				this.$router.push('/ringRatio/'+this.selectIndex);
			},
			//时餐
			goTimeMeal(){
				this.$router.push('/timeMeal/'+this.selectIndex);
			},
			//同行
			goPeerCompare(){
				this.$router.push('/peerCompare/'+this.selectIndex);
			},
			//无效订单
			goInvalidOrder(){
				this.$router.push('/invalidOrder/'+this.selectIndex);
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.business {
		.content {
			.today_stat {
				height: .8rem;
				display: flex;
				justify-content: space-around;
				border-bottom: 1px solid #f0f0f0;
				background: #fff;
				.today_stat_left {
					width: 40%;
					display: flex;
					align-items: center;
					img {
						width: .09rem;
						height: .39rem;
					}
					span {
						font-size: .34rem;
						color: #191919;
						font-weight: 700;
						margin-left: .28rem;
					}
				}
				.today_stat_right {
					width: 40%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					img {
						width: .16rem;
						height: .16rem;
					}
					span {
						font-size: .28rem;
						color: #959595;
						margin-right: .1rem;
					}
				}
			}
			.statistics_num {
				height: 1.5rem;
				display: flex;
				align-items: center;
				background: #fff;
				.business_volume {
					width: 50%;
					padding-left: .34rem;
					p:nth-of-type(1) {
						display: flex;
						align-items: center;
						font-size: .26rem;
						color: #909090;
						letter-spacing: .02rem;
						span {
							color: #e25251;
							border: 1px solid #e25251;
							font-size: .2rem;
							padding: 0 .02rem;
							border-radius: .02rem;
							margin-left: .02rem;
						}
						img {
							width: .26rem;
							height: .26rem;
							margin-left: .12rem;
						}
					}
					p:nth-of-type(2) {
						text-align: left;
						margin-top: .18rem;
						font-size: .22rem;
						color: #191919;
						span {
							font-size: .36rem;
							font-weight: 700;
						}
					}
				}
				.news {
					border-right: 1px solid #efefef;
				}
			}
			.time_nav {
				background: #fff;
				margin: .18rem 0;
				.select_dates {
					height: 1.2rem;
					background: #fff;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-bottom: .2rem;
					border: 1px solid #f0f0f0;
				}
			}
			.business_analysis {
				background: #fff;
				.business_analysis_detail {
					padding-bottom: .5rem;
					border-bottom: 2px solid #f0f0f0;
					.business_analysis_detail_top {
						width: 50%;
						padding-left: .34rem;
						p:nth-of-type(1) {
							display: flex;
							align-items: center;
							font-size: .26rem;
							color: #909090;
							letter-spacing: .02rem;
							margin-top: .22rem;
							span {
								font-size: .2rem;
								color: #e25251;
								border: 1px solid #e25251;
								padding: 0 .02rem;
								margin-left: .02rem;
								border-radius: .02rem;
							}
							img {
								width: .26rem;
								height: .26rem;
								margin-left: .12rem;
							}
						}
						p:nth-of-type(2) {
							text-align: left;
							margin: .14rem 0;
							span {
								font-size: .36rem;
								font-weight: 700;
							}
						}
						p:nth-of-type(3) {
							text-align: left;							
							font-size: .22rem;
							color: #6a6a6a;
						}
					}
					.business_analysis_detail_bottom {
						display: flex;
						margin-top: .2rem;
						.news {
							border-right: 1px solid #efefef;
						}
					}
				}
				.probably_status {
					height: 2.75rem;
					.probably_status_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: .28rem .24rem 0 .24rem;
						>p {
							font-size: .24rem;
							color: #191919;
						}
						.probably_status_all {
							display: flex;
							align-items: center;
							img {
								width: .16rem;
								height: .16rem;
							}
							span {
								font-size: .26rem;
								color: #999;
								margin-right: .1rem;
							}
						}
					}
					.status_lists {
						display: flex;
						padding: .6rem .2rem;
						overflow-x: scroll;
						.morning {
							width: 1.6rem;
							background: #f9f9f9;
							text-align: left;
							padding: .12rem;
							margin-left: .28rem;
							p:nth-of-type(1) {
								height: 50%;
								display: flex;
								align-items: center;
								font-size: .26rem;
								color: #0c0c0c;
								margin-right: .25rem;
								white-space: nowrap;
								img {
									height: .28rem;
									margin-right: .12rem;
								}
							}
							p:nth-of-type(2) {
								height: 50%;
								display: flex;
								align-items: center;
								font-size: .2rem;
								color: #0c814a;
								margin: 0.06rem .22rem 0 0;
								img {
									width: .20rem;
									height: .28rem;
								}
							}
						}
					}
				}
				.same_trade_compare {
					background: #fff;
					border-top: .25rem solid #efefef;
					border-bottom: .25rem solid #efefef;
					>p {
						width: 90%;
						padding: .52rem .26rem;
						font-size: .26rem;
						color: #0b0b0b;
						text-align: left;
					}
				}
				.invalid_order {
					.today_stat {
						height: .8rem;
						display: flex;
						align-items: center;
					}
					height: 3.34rem;
					background: #fff;
					border-bottom: .25rem solid #efefef;
					.invalid_order_bottom {
						display: flex;
						justify-content: space-between;
						padding: 0 .2rem;
						.invalid_order_num {
							p:nth-of-type(1) {
								display: flex;
								align-items: center;
								font-size: .26rem;
								color: #a0a0a0;
								margin-top: .22rem;
								span {
									color: #909090;
									border: 1px solid #e25251;
								}
								img {
									width: .26rem;
									height: .26rem;
									margin-left: .12rem;
								}
							}
							p:nth-of-type(2) {
								text-align: left;
								margin-top: .22rem;
								span {
									font-size: .38rem;
									font-weight: 700;
								}
							}
							p:nth-of-type(3) {
								text-align: left;
								margin-top: .22rem;
								font-size: .22rem;
								color: #6a6a6a;
							}
						}
						.invalid_order_reason {
							line-height: .8rem;
							font-size: .22rem;
							color: #0b0b0b;
						}
					}
				}
			}
		}
	}
</style>